<template>
    <view class="prohibition">
        <view class="demo" :style="[{height},{paddingTop}]">
            <!-- 中间标题文字 -->
            <view class="title">
                {{title}}
            </view>
        </view>
    </view>
</template>
  
<script>
    export default {
        data() {
            return {
                height: 0, 
                paddingTop: 0,
                 
            }
        },
        // props: ["title", "back"],
        props:{
            title:{ // 标题文字(默认为空)
                type:String,
                default:''
            },
        },
         
        created() {
            const demo = uni.getMenuButtonBoundingClientRect()
            this.height = demo.height + "px"
            this.paddingTop = demo.top + "px"
  
        },
        methods: {
            // 左侧返回按钮调用
            onBack() {
                this.$emit("onBack")
            }
        }
    }
</script>
<style lang="scss">
	.prohibition{
		background-image: url('/static/new-img/nav-bar-bg.png');
		background-size: cover;
		height: 400rpx;
	}
    .demo {
        position: relative;//注意，建议使用相对定位，因为固定定位会脱离文档流，然后你还要去设置marginTop值
        // position: fixed;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 26rpx;
        z-index: 100;
        padding-bottom: 10rpx;
  
        .left {
            float: left;
            position: absolute;
            width: 100rpx;
            height: 50rpx;
            top: 0;
            bottom: 0;
            left: 20rpx;
            color: #fff;
            margin: auto;
        }
  
        .title {
            font-size: 36rpx;
            font-family: Source Han Sans CN;
            color: #FFFFFF;
        }
    }
</style>